<template>
	<div>
		<div>
			<el-table :data="pageInfo.list" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column prop="id" label="配药ID" width="50">
				</el-table-column>
				<el-table-column prop="name" label="药品名" >
				</el-table-column>
				<el-table-column prop="category" label="分类" >
				</el-table-column>
				<el-table-column prop="price" label="价格" >
				</el-table-column>
				<el-table-column prop="brand" label="品牌" >
				</el-table-column>
				<el-table-column prop="deadline" label="保质期">
				</el-table-column>
			</el-table>
		</div>

		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum" :page-sizes="['2','3']" :page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import moment from "moment";
	import {
		FormItem
	} from "element-ui";
		export default {
			methods: {
				tableRowClassName({
					row,
					rowIndex
				}) {
					if (rowIndex === 1) {
						return 'warning-row';
					} else if (rowIndex === 3) {
						return 'success-row';
					}
					return '';
				},
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					this.pageSize = val;
					this.getDispense();
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
					this.currentPage = val;
					this.getDispense();
				},
				getDispense() {
					this.$axios.get("http://localhost:8080/dispense/" + this.currentPage + "/" + this.pageSize).then(
						rew => {
							this.pageInfo = rew.data.data;
						})
				}
			},
			data() {
				return {
					currentPage: 1,
					pageSize: 2,
					pageInfo: {},
				}
			},
			created() {
				this.getDispense();
			}
		}
</script>

<style lang="less" scoped></style>
